<template>
  <div class="clazz flex between">
    <template v-if="detail?.status">
      <div class="main-left">
        <div class="left-div1">
          <div class="title title1">课程信息</div>
          <div class="div1-con flex between">
            <div class="con-left">
              <div>姓名：{{ detail?.course_info?.teacher?.name || "-" }}</div>
              <div>
                职务：{{ detail?.course_info?.teacher?.position || "-" }}
              </div>
              <div>所授课程：{{ detail?.course_info?.subject?.current }}</div>
              <div>
                联系方式：{{ detail?.course_info?.teacher?.mobile || "-" }}
              </div>
            </div>
            <div class="con-right">
              <div class="item flex align between">
                <div style="flex-shrink: 0; margin-right: 10px">上节课程</div>
                <div>{{ detail?.course_info?.subject?.previous }}</div>
              </div>
              <div class="item flex align between">
                <div style="flex-shrink: 0; margin-right: 10px">当前课程</div>
                <div class="tab">
                  {{ detail?.course_info?.subject?.current }}
                </div>
              </div>
              <div class="item flex align between">
                <div style="flex-shrink: 0; margin-right: 10px">下节课程</div>
                <div>{{ detail?.course_info?.subject?.next }}</div>
              </div>
            </div>
          </div>
        </div>
        <div class="left-div2">
          <div class="title title2">考勤信息</div>
          <div class="div2-con">
            <div class="item flex between">
              <div class="flex between">
                <div>全班：</div>
                <div>{{ detail?.attendance_info?.total }}人</div>
              </div>
              <div class="flex between">
                <div>请假：</div>
                <div>{{ detail?.attendance_info?.leave_num }}人</div>
              </div>
            </div>
            <div class="item flex between">
              <div class="flex between">
                <div>实到：</div>
                <div>{{ detail?.attendance_info?.attendance_num }}人</div>
              </div>
              <div class="flex between">
                <div>旷课：</div>
                <div>{{ detail?.attendance_info?.absence_num }}人</div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="main-right">
        <div class="title">学生信息</div>
        <template v-if="detail?.student_list.length">
          <div class="nameList">
            <div
              class="item"
              v-for="(item, index) in detail.student_list"
            >
              <div>{{ item.name }}</div>
              <div class="tab">{{ item.status ? "已" : "未" }}签到</div>
            </div>
          </div>
        </template>
        <template v-else>
          <div class="empty">
            <el-empty description="暂无数据" />
          </div>
        </template>
      </div>
    </template>
    <template v-else>
      <div class="empty">
        <el-empty description="暂无数据" />
      </div>
    </template>
  </div>
</template>
<script setup>
import { ElEmpty } from "element-plus";
import { clazz } from "@/api/apiData";
import { onMounted, ref, inject, computed } from "vue";
const {
  deviceDetail,
  setAppTitle,
  setDeviceDetail,
  getApiClazzDetail,
  schoolInfo,
} = inject("global-stroe");
const detail = ref({});
onMounted(() => {
  detail.value = null;
  // console.log(deviceDetail.value);
  const room_id = deviceDetail.value?.room_id;
  // console.log("room_id", room_id);
  clazz.room
    .getClassRoomInfo({
      room_id,
    })
    .then(({ data }) => {
      console.log("getClassRoomInfo-data", data);
      console.log("deviceDetail", deviceDetail.value);
      detail.value = data;
      setAppTitle(deviceDetail.value.room.name, data?.course_info?.clazz_names);
    });
});
</script>
<style
  lang="less"
  scoped
>
.clazz {
  height: 100%;
  padding: 20px;
  box-sizing: border-box;
  .main-left {
    width: 660px;
    height: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    .left-div1 {
      background: white;
      border-radius: 8px;
      height: 380px;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      .title1 {
        background: linear-gradient(to right, #18e1b8, #04be93);
      }
      .div1-con {
        flex: 1;
        padding: 30px;
        box-sizing: border-box;
        overflow: hidden;
        .con-left {
          height: 100%;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          font-size: 24px;
          border-right: solid 1px #e1e1e1;
          margin-right: 10px;
        }
        .con-right {
          height: 100%;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          padding-left: 21px;
          .item {
            font-size: 19px;
            div:nth-child(1) {
              color: #a2a2a2;
            }
            .tab {
              background: #14d9af;
              border-radius: 8px;
              color: white;
              font-size: 30px;
              padding: 9px 20px;
            }
          }
        }
      }
    }
    .left-div2 {
      min-height: 328px;
      border-radius: 8px;
      overflow: hidden;
      margin-top: 20px;
      font-size: 38px;
      background: white;
      display: flex;
      flex-direction: column;
      .title2 {
        background: linear-gradient(to right, #fe9a14, #fe774a);
      }
      .div2-con {
        flex: 1;
        padding: 0 40px;
        box-sizing: border-box;
        .item {
          margin-top: 38px;
          .flex {
            width: 48%;
          }
        }
      }
    }
  }
  .main-right {
    width: 1200px;
    height: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    border-radius: 8px;
    overflow: hidden;
    .title {
      background: linear-gradient(to right, #9e4bfd, #7747ff);
    }
    .nameList {
      flex: 1;
      background: white;
      padding: 30px 50px;
      /*  display: grid; */
      column-count: 6;
      column-gap: 0;
      text-align: center;
      font-size: 28px;
      .item {
        margin-bottom: 30px;
      }
      .tab {
        color: #00ac88;
        font-size: 24px;
        margin-top: 6px;
      }
    }
  }

  .empty {
    width: 100%;
    height: 100%;
    background-color: #fff;
    break-before: 8px;
    overflow: hidden;
  }
}
</style>
